﻿@page "/carousels"
@inject IStringLocalizer<Carousels> Localizer

<h3>@Localizer["Title"]</h3>

<h4>@Localizer["SubTitle"]</h4>

<DemoBlock Title="@Localizer["BasicUsageTitle"]" Introduction="@Localizer["BasicUsageIntro"]" Name="Normal">
    <Carousel Images="@Images" Width="280"></Carousel>
</DemoBlock>

<DemoBlock Title="@Localizer["FadeTitle"]" Introduction="@Localizer["FadeIntro"]" Name="Fade">
    <Carousel Images="@Images" Width="280" IsFade="true"></Carousel>
</DemoBlock>

<DemoBlock Title="@Localizer["OnClickTitle"]" Introduction="@Localizer["OnClickIntro"]" Name="OnClick">
    <Carousel Images="@Images" Width="280" IsFade="true" OnClick="@OnClick"></Carousel>
    <BlockLogger @ref="Trace" class="mt-3" />
</DemoBlock>

<DemoBlock Title="@Localizer["ChildContentTitle"]" Introduction="@Localizer["ChildContentIntro"]" Name="ChildContent">
    <Carousel Width="280">
        <CarouselItem>
            <div class="carousel-item-demo">
                <h3>Title-1</h3>
                <div>Content-1</div>
                <div>
                    <Button Icon="fa fa-fa" Text="Button-1" />
                </div>
            </div>
        </CarouselItem>
        <CarouselItem>
            <div class="carousel-item-demo">
                <h3>Title-2</h3>
                <div>Content-2</div>
                <div>
                    <Button Icon="fa fa-fa" Text="Button-2" />
                </div>
            </div>
        </CarouselItem>
        <CarouselItem>
            <div class="carousel-item-demo">
                <h3>Title-3</h3>
                <div>Content-3</div>
                <div>
                    <Button Icon="fa fa-fa" Text="Button-3" />
                </div>
            </div>
        </CarouselItem>
    </Carousel>
</DemoBlock>

<AttributeTable Items="@GetAttributes()" />
